<template>
	<view>
		<Navbar :isReturn="true"></Navbar>
		<view class="u-m-30">
			<view class="u-font-34 u-font-bold">代注册列表：</view>
			<view class="u-m-t-30 u-p-l-30 u-p-r-30 u-card-box u-flex u-row-between" v-for="item in proxyList" :key="item.id" @click="onEditProxy(item)">
				<view class="u-flex-1 u-m-r-20 u-ellipsis">
					<view class="u-font-34 u-font-bold">{{item.name}}</view>
					<view class="u-m-t-15 u-ellipsis">{{item.company}}</view>
				</view>
				<view class="share_tag" @click.native.stop="onGetShare(item.id)">分享给他 ></view>
			</view>
		</view>
		
		<Loadmore :status="status"></Loadmore>
		
		<view style="height: 200rpx;"></view>
		
		<Bottom :isTwice="true" :rightText="'代好友注册'" @confirm="onGoForm"></Bottom>
		
		<!-- 分享码 -->
		<!-- <PosterImage :data="posterData" @closePosterImage="posterData.show = false"></PosterImage> -->
		
		<!-- 开屏广告 -->
		<u-mask :show="posterData.show">
			<view class="u-flex u-flex-col u-row-center u-height-100 u-width-100">
				<view>
					<u-image width="534rpx" border-radius="20rpx" :src="posterData.image" mode="widthFix"></u-image>
				</view>
				<view class="u-m-t-40" @click="posterData.show = false">
					<u-icon size="50" class="u-p-r-8" color="#fff" name="close-circle" />
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import Loadmore from '@/components/Loadmore.vue'
	import PosterImage from '@/components/PosterImage.vue'
	import reachBottom from '@/mixins/reachBottom.js'
	import { userProxyList, userProxyQrcode } from '@/network/api.js'
	export default {
		mixins: [reachBottom],
		components:{
			Navbar,
			Bottom,
			Loadmore,
			PosterImage
		},
		data(){
			return{
				proxyList: [],
				posterData: {
					show: false,
					image: '',
					next: 0
				},
				status: 'loadmore'
			}
		},
		onLoad(){
			this.onGetProxyList()
		},
		mounted(){
			let _this = this
			uni.$on('update',function(){
				_this.page = 1
				_this.proxyList = []
				_this.status = 'loadmore'
				_this.onGetProxyList()
			})
		},
		onUnload() {
			uni.$off('update')
			this.stickyStyle = ''
		},
		methods:{
			onGetProxyList(){
				const params = {
					user_id: uni.getStorageSync("user_id"),
					page: this.page,
					limit: this.pageSize
				}
				userProxyList(params).then(res=>{
					if (res.data.list.length > 0) {
						res.data.list.map(item => {
							this.proxyList.push(item)
						})
					}
					if (res.data.list.length < 10) this.status = 'nomore'
				})
			},
			onGoForm(){
				uni.navigateTo({
					url: "/operate/proxyForm/proxyForm"
				})
			},
			onGetShare(id){
				const params = {
					page: 'operate/proxyEmpty/proxyEmpty',
					replace_id: id
				}
				userProxyQrcode(params).then(res=>{
					this.posterData.image = res.data.qrcode
					this.posterData.show = true
				})
			},
			onEditProxy(val){
				if(![0].includes(val.new_user_id)){
					return
				}else{
					uni.navigateTo({
						url: "/operate/proxyForm/proxyForm?id=" + val.id
					})
				}
			},
			loadData(){
				if (this.status == 'nomore') return
				this.page++
				this.status = 'loading'
				this.onGetProxyList()
			}
		}
	}
</script>

<style scoped>
	.share_tag{
		background: #FFF1E9;
		color: #FB8231;
		border-radius: 50rpx;
		padding: 10rpx 20rpx;
	}
</style>